import { fileURLToPath, URL } from 'node:url'

import { defineConfig,loadEnv} from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import Components from 'unplugin-vue-components/vite'
// import ElementPlus from 'unplugin-element-plus/vite'
import vueSetupExtend from 'vite-plugin-vue-setup-extend'

import {
  ElementPlusResolver,
  // VantResolver,
} from 'unplugin-vue-components/resolvers'

// 各部分打包体积的可视化分析
import { visualizer } from 'rollup-plugin-visualizer'

// https://vitejs.dev/config/
export default defineConfig(({command, mode})=>{
 
  const env = loadEnv(mode, process.cwd(), '')


  return {
    define: {
      'process.env': env
    },
    plugins: [

      vue(), 
      vueJsx(),
      vueSetupExtend(), // 使得支持setup标签的name属性作为组件的name    
      // 组件的按需以及自动导入
      Components({
        resolvers: [
            ElementPlusResolver({
              importStyle: "sass",   // boolean | 'css' | 'sass'。
               directives: true,
              version: "2.1.5",
            }),
          ],
          dts: true, 
      }),
      // ElementPlus({
      //   // options
      //   useSource:false,   // 为true时倒入scss文件的样式
      // }),
      
      visualizer({
        emitFile: true,//是否被触摸
        filename: "buildAnalysis.html",//生成分析网页文件名
        open: true,//在默认用户代理中打开生成的文件
        gzipSize: true,//从源代码中收集 gzip 大小并将其显示在图表中
        brotliSize: true,//从源代码中收集 brotli 大小并将其显示在图表中
    }),
    ],
    build: {
      /** 打包后静态资源目录 */
      assetsDir: 'static',
      /** 消除打包大小超过 500kb 警告 */
      chunkSizeWarningLimit: 2000,
      minify: 'terser',
      terserOptions: {
        compress: {
          //生产环境时移除console和debug。webpack项目可以使用babel-plugin-transform-remove-console
          drop_console: true,
          drop_debugger: true,
        },
        format: {
          /** 删除注释 */
          comments: false
        }
      },
    },
    css: {
      preprocessorOptions: {
        // scss变量修改
        scss:{
         additionalData: `@use "@/theme/elPlus.theme.scss" as *;`, 
          // additionalData: `@use ".src/theme/elPlus.theme.scss" as *;` // 没有别名就用相对路径
        },
      }
    },
    resolve: {
      alias: {
        '@': fileURLToPath(new URL('./src', import.meta.url)),
        'vue-i18n': 'vue-i18n/dist/vue-i18n.cjs.js',  
      }
    },
    server:{
      /** 端口号，范围为:0-65535*/
      port: 13142,
      /** 是否自动打开浏览器 */
      open: true,
      host:true,
      proxy:{  
        "/dev/api":{          
            rewrite: (path) => path.replace(/^\/dev\/api/,''),  // 重写路径
            target:"http://localhost:5000" ,    //代理服务器请求的目标服务器
            changeOrigin:true,
            ws:true,                 //用于支持websocket
        },
        "/dev/api1":{
         // pathRewrite:{'^/dev/api1':''}, 
            rewrite: (path) => path.replace(/^\/dev\/api1/,''),
            target:"http://localhost:5001" ,
            changeOrigin:true,
            ws:true,
        },
    }
    }
  }
})
